<div draggable mat-dialog-title>
  <h6>{{"viewPerson" | translate}}</h6>
</div>
<div mat-dialog-content class="wdl-dialog-content">
  <mat-tab-group>
    <mat-tab label="{{'basicInfo' | translate}}">
      <form [formGroup]="basicForm" class="form-container" novalidate autocomplete="off">
        <mat-grid-list cols="6" rowHeight="70px" gutterSize="10">
          <mat-grid-tile colspan="3">
            <mat-form-field>
              <input formControlName="name" matInput placeholder="{{'name' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="1">
            <mat-form-field>
              <input formControlName="sex" matInput placeholder="{{'sex' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="2">
            <mat-form-field>
              <input formControlName="birth" matInput placeholder="{{'birth' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="3">
            <mat-form-field>
              <input formControlName="rid" matInput placeholder="{{'rid' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="3">
            <mat-form-field>
              <input formControlName="education" matInput placeholder="{{'education' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="3">
            <mat-form-field>
              <input formControlName="phone" matInput placeholder="{{'phone' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="3">
            <mat-form-field>
              <input formControlName="nation" matInput placeholder="{{'nation' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="6">
            <mat-form-field>
              <input formControlName="address" matInput placeholder="{{'address' | translate}}">
            </mat-form-field>
          </mat-grid-tile>
        </mat-grid-list>
      </form>
    </mat-tab>

    <mat-tab label="{{'contactInfo' | translate}}">
      <form [formGroup]="contactForm" class="form-container" novalidate autocomplete="off">
        <mat-grid-list cols="6" rowHeight="70px" gutterSize="10">
          <mat-grid-tile colspan="3">
            <mat-form-field>
              <input formControlName="name1" matInput placeholder="{{'contact1Name' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="1">
            <mat-form-field>
              <input formControlName="sex1" matInput placeholder="{{'sex' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="2">
            <mat-form-field>
              <input formControlName="phone1" matInput placeholder="{{'phone' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="6">
            <mat-form-field>
              <input formControlName="address1" matInput placeholder="{{'address' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="3">
            <mat-form-field>
              <input formControlName="name2" matInput placeholder="{{'contact2Name' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="1">
            <mat-form-field>
              <input formControlName="sex2" matInput placeholder="{{'sex' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="2">
            <mat-form-field>
              <input formControlName="phone2" matInput placeholder="{{'phone' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="6">
            <mat-form-field>
              <input formControlName="address2" matInput placeholder="{{'address' | translate}}">
            </mat-form-field>
          </mat-grid-tile>
        </mat-grid-list>
      </form>
    </mat-tab>

    <mat-tab label="{{'healthSetting' | translate}}">
      <form [formGroup]="healthForm" class="form-container" novalidate autocomplete="off">
        <mat-grid-list cols="4" rowHeight="70px" gutterSize="10">
          <mat-grid-tile colspan="2">
            <mat-form-field>
              <input formControlName="heartUp" matInput placeholder="{{'heartUp' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="2">
            <mat-form-field>
              <input formControlName="heartLow" matInput placeholder="{{'heartLow' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="2">
            <mat-form-field>
              <input formControlName="breatheUp" matInput placeholder="{{'breatheUp' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="2">
            <mat-form-field>
              <input formControlName="breatheLow" matInput placeholder="{{'breatheLow' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="2">
            <mat-form-field>
              <input formControlName="move" type="number" matInput placeholder="{{'moveThreshold' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="2">
            <mat-form-field>
              <mat-select formControlName="turnOverReminder" placeholder="{{'turnOverReminder' | translate}}">
                <mat-option [value]="0">{{'noReminder' | translate}}</mat-option>
                <mat-option [value]="90">1.5 {{'hours' | translate}}</mat-option>
                <mat-option [value]="120">2 {{'hours' | translate}}</mat-option>
                <mat-option [value]="180">3 {{'hours' | translate}}</mat-option>
                <mat-option [value]="240">4 {{'hours' | translate}}</mat-option>
              </mat-select>
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="1" class="wdl-checkbox">
            <mat-checkbox formControlName="awayAlarm">{{'awayAlarm' | translate}}</mat-checkbox>
          </mat-grid-tile>
          <mat-grid-tile colspan="1" class="wdl-checkbox">
            <mat-checkbox formControlName="upAlarm">{{'upAlarm' | translate}}</mat-checkbox>
          </mat-grid-tile>
          <mat-grid-tile colspan="1" class="wdl-checkbox">
            <mat-checkbox formControlName="sideAlarm">{{'sideAlarm' | translate}}</mat-checkbox>
          </mat-grid-tile>
          <mat-grid-tile colspan="1" class="wdl-checkbox">
            <mat-checkbox formControlName="silent">{{'silent' | translate}}</mat-checkbox>
          </mat-grid-tile>
        </mat-grid-list>
      </form>
    </mat-tab>

    <mat-tab label="{{'inHospitalInfo' | translate}}">
      <form [formGroup]="hospitalForm" class="form-container" novalidate autocomplete="off">
        <mat-grid-list cols="3" rowHeight="70px" gutterSize="10">
          <mat-grid-tile colspan="1">
            <mat-form-field>
              <input formControlName="nurse" matInput placeholder="{{'majorNurse' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="1">
            <mat-form-field>
              <input formControlName="checkinTime" matInput placeholder="{{'checkinTime' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="1">
            <mat-form-field>
              <input formControlName="checkoutTime" matInput placeholder="{{'checkoutTime' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="3">
            <mat-form-field>
              <input formControlName="checkinRecord" matInput placeholder="{{'checkinRecord' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="3">
            <mat-form-field>
              <input formControlName="bed" matInput placeholder="{{'bedInfo' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="3">
            <mat-form-field>
              <input formControlName="checkoutRecord" matInput placeholder="{{'checkoutRecord' | translate}}">
            </mat-form-field>
          </mat-grid-tile>
        </mat-grid-list>
      </form>
    </mat-tab>

    <mat-tab label="{{'deviceInfo' | translate}}">
      <form [formGroup]="deviceForm" class="form-container" novalidate autocomplete="off">
        <mat-grid-list cols="3" rowHeight="70px" gutterSize="10">
          <mat-grid-tile colspan="1">
            <mat-form-field>
              <input formControlName="device1" matInput placeholder="{{'device1' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="1">
            <mat-form-field>
              <input formControlName="bind1Time" matInput placeholder="{{'bindTime' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="1">
            <mat-form-field>
              <input formControlName="unbind1Time" matInput placeholder="{{'unbindTime' | translate}}">
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile colspan="1">
            <mat-form-field>
              <input formControlName="device2" matInput placeholder="{{'device2' | translate}}">
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile colspan="1">
            <mat-form-field>
              <input formControlName="bind2Time" matInput placeholder="{{'bindTime' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="1">
            <mat-form-field>
              <input formControlName="unbind2Time" matInput placeholder="{{'unbindTime' | translate}}">
            </mat-form-field>
          </mat-grid-tile>
        </mat-grid-list>
      </form>
    </mat-tab>
  </mat-tab-group>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="dialogRef.close('Close')">{{'close' | translate}}</button>
</div>
